<template>
  <div id="Product2">
    <!-- 首页横幅界面 -->
    <section class="header-pullapp" v-show="flag">
      <section class="header-pullapp-content">

				<span class="header-pullapp-close">
					<span class="img" @click="flag=!flag">
					</span>
				</span>
				<span class="header-pullapp-img">
					<img src="https://res.vmallres.com/pimages//pages/templateContent/05414906713610941450.png" title=""
						data_ue_src="https://res.vmallres.com/pimages//pages/templateContent/05414906713610941450.png">
				</span>
				<span class="header-pullapp-txtbox">
					<span>
						<div class="header-pullapp-txtbox-title">来华为商城首页</div>
						<div class="header-pullapp-txtbox-txt">立即领取新人专享见面礼</div>
					</span>
				</span>
				<router-link to="/real">
					<span class="header-pullapp-btnbox">
						<span class="header-pullapp-btn">首页</span>
					</span>
				</router-link>
			</section>
		</section>
		<!-- 非凡大师基本信息 -->
		<div class="top_nav">
			<a href="#/Classify"><img class="back" src="../assets/images/product_back.png" alt=""></a>
			<p :class="{top_click: type=='商品'}" @click="toDetails('商品')">商品</p>
			<p :class="{top_click: type == '评价'}" @click="toDetails('评价')">评价</p>
			<p :class="{top_click: type == '参数'}" @click="toDetails('参数')">参数</p>
			<p :class="{top_click: type == '详情'}" @click="toDetails('详情')">详情</p>
			<img class="xiala" @click="xialaKuang = !xialaKuang" src="../assets/images/product_xiala.png" alt="">
		</div>

    <!-- 下拉框 -->
    <div class="header-menu" v-show="xialaKuang">
      <nav>
        <ul class="btn-menu2-items">
          <li class="product_detail_topright_homepage">
            <a href="#/real"><i class="icon-menu-index-black"></i><span>首页</span></a>
          </li>
          <li class="product_detail_topright_search"><a href="#/r_search"><i
                class="icon-menu-search-black"></i><span>搜索</span></a></li>
          <li class="product_detail_topright_category"><a class="category-view-classname" href="#/classify"><i
                class="icon-menu-category-black"></i><span>分类</span></a></li>
          <li class="product_detail_topright_cart"><a href="#/Select"><i
                class="icon-menu-cart-black "></i><span>购物车</span></a></li>
          <li class="product_detail_topright_mine"><a class="personal-view-classname" href="#/My"><i
                class="icon-menu-person-black"></i><span>我的</span></a></li>
        </ul>
      </nav>
    </div>
    <!-- 商品轮播图 -->
    <!-- <div class="banner-imgBox">
			<div class="banner-imgBox2">


				<img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621/group//428_428_83C1A1DD309DD9E2DD382A75596B74DF.png"
					alt="">

				<img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621/group//800_800_69725AB1DB976A3B221A757FCC8552BA.png"
					alt="">
			</div>
			<div class="banner-imgBox-div">
				<div class="on"></div>
				<div class="on"></div>
				<div class="on"></div>
				<div class="on"></div>
				<div class="on"></div>
			</div>
			<img class="banner-imgBox-left" src="../assets/images/product_back_left.png" onclick="marginLeft(false)">
			<img class="banner-imgBox-right" src="../assets/images/product_back_right.png" onclick="marginLeft(true)">

		</div> -->
    <div class="sid">
      <div class="head3_lunbo">
        <!-- 引入轮播图图片 -->
        <a href="#" target="_blank"><img
            src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202312/displayProduct/10086057166784/428_428_b_mobileF801F73B7BCC524A825B18A827758FC8.png"
            alt=""></a>
        <a href="#" target="_blank"><img
            src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103111297/group//428_428_BF5F77D50078A76800E7FB1144559D27.png"
            alt=""></a>
        <a href="#" target="_blank"><img
            src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103111297/group//428_428_22244A9768B7B853C64F782B3DBB791B.png"
            alt=""></a>
        <a href="#" target="_blank"><img
            src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103111297/group//428_428_D3F4B56339E65480891038F55A3DAA09.png"
            alt=""></a>
      </div>
    </div>
    <div class="xia">
      <div class="huodong">
        <img src="../assets/images/product_huodong2.png" alt="">
      </div>
      <!-- 商品价格详情 -->
      <div class="spname">
        <img @click="youhui = 1" src="../assets/images/product_name2.png" alt="">

      </div>
      <div class="youhui_2" v-show="youhui">
        <nav>
          <img src="../assets/images/product_cuxiao.png" alt="">
        </nav>
        <div class="youhui_ok" @click="youhui = 0">
          <span>确定</span>
        </div>
      </div>
      <div class="spselect">
        <div class="spcolor" @click="sp_color"></div>
        <div class="spsize" @click="sp_size"></div>
        <div class="spnum">
          <input type="button" @click="add()" value="+" class="numa">
          <input type="button" value="1" class="num">
          <input type="button" @click="sub()" value="-" class="nums">
        </div>
        <div class="baozhang" @click="bao_zhang=1"></div>
        <div class="youhui_2" v-show="bao_zhang">
          <nav>
            <img src="../assets/images/product_baozhang.png" alt="">
          </nav>
          <div class="youhui_ok" @click="bao_zhang = 0">
            <span>确定</span>
          </div>
        </div>
      </div>
      <div class="spfahuo">
        <img @click="fahuo = 1" src="../assets/images/product_fahuo.png" alt="">
      </div>
      <div class="youhui_2" v-show="fahuo">
        <nav>
          <img src="../assets/images/product_fuwushuoming.png" alt="">
        </nav>
        <div class="youhui_ok" @click="fahuo = 0">
          <span>确定</span>
        </div>
      </div>
      <div class="pingjia" id="pingjia">
        <img @click="" src="../assets/images/product_pingjia.png" alt="">
      </div>
      <div class="pingjia">
        <img @click="canshu = 1" src="../assets/images/product_canshu2.png" alt="">
      </div>
      <div class="youhui_2" v-show="canshu">
        <nav>
          <img src="../assets/images/product_allcanshu.png" alt="">
        </nav>
        <div class="youhui_ok" @click="canshu = 0">
          <span>确定</span>
        </div>
      </div>
      <div class="sptuwenxian">
        <img src="../assets/images/product_tuwenxian.png" alt="">
      </div>
      <div class="tuwen">
        <img src="https://res.vmallres.com//uomcdn/CN/pms/202309/DFD8B723AF92F3B8C985B5DEC41A0FFE.jpg" alt="">
        <img src="https://res.vmallres.com//uomcdn/CN/pms/202311/D0446D90703062772CF5173CB9633F2F.jpg" alt="">
        <img src="https://res.vmallres.com//uomcdn/CN/pms/202311/6B520E21D04F24A816219BAEDD624BA4.jpg" alt="">
        <img src="https://res.vmallres.com//uomcdn/CN/pms/202311/2070BBA9A7137F9450B6DBC63AE65539.jpg" alt="">
        <img src="https://res.vmallres.com//uomcdn/CN/pms/202311/1623DA26F92C4FFADDA889DD5374EA5C.jpg" alt="">
        <img src="https://res.vmallres.com//uomcdn/CN/pms/202311/4674930206E2AB0FB35B96EDACC95584.jpg" alt="">
        <img src="https://res.vmallres.com//uomcdn/CN/pms/202311/5E8E48757AFF77DB72024C036814C921.jpg" alt="">
        <img src="https://res.vmallres.com//uomcdn/CN/pms/202311/0BEC295B77AF1812139D5D7B58A093C2.jpg" alt="">
        <img src="https://res.vmallres.com//uomcdn/CN/pms/202311/008A9A402CDA3E91ECF0B030EA9DB642.jpg" alt="">
        <img src="https://res.vmallres.com//uomcdn/CN/pms/202209/386C48AEC1CD35F864F48A79643669B6.jpg" alt="">

      </div>
    </div>
    <div class="buy">
      <div class="jiagou" @click="addShopcart">
        <span>加入购物车</span>
      </div>
      <div class="timebuy" @click="pay">
        <span>立即购买</span>
      </div>
    </div>



  </div>

</template>

<script>
  var getCookie = function(a) {
  var f = null;
  if (document.cookie && document.cookie != '') {
    var d = document.cookie.split(';');
    for (var c = 0; c < d.length; x = 0
    }
    else {
      x--;
    }
  } else {
    index--;
    x--;
  }
  switchBtn.children[index].classList.add('on2');
  content.style.marginLeft = x * -1530 + "px"
  }
  c++) {
    var b = (d[c] || '').replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, '');
    if (b.substring(0, a.length + 1) == (a + '=')) {
      var e = function(j) {
        j = j.replace(/\+/g, ' ');
        var h = '()<>@,;:\\"/[]?={}';
        for (var g = 0; g < h.length; g++) {
          if (j.indexOf(h.charAt(g)) != -1) {
            if (j.startWith('"')) {
              j = j.substring(1);
            }
            if (j.endWith('"')) {
              j = j.substring(0, j.length - 1);
            }
            break;
          }
        }
        return decodeURIComponent(j);
      };
      f = e(b.substring(a.length + 1));
      break;
    }
  }
  }
  return f;
  },
  cid = '';
  cid = getCookie('cps_id');
  if (cid == '134297') {
    var obj = document.getElementsByClassName('header-pullapp')[0];
    if (obj != null) {
      obj.parentNode.removeChild(obj);
    }
  }

  setTimeout(function() {
    document.getElementById('basicInfo').addEventListener('scroll', function() {
      Utils.imagelazy.render = function(e) {
        var t = e.offset().top,
          docPrd = document.compatMode == 'CSS1Compat' ? document.documentElement : document
          .body;
        return (t < docPrd.clientHeight) && (e.attr('src', e.attr('data-lazy-src')),
          e.removeAttr('data-lazy-src'),
          !0);
      };
    });
  }, 1000);
</script>

<script>
  export default {
    name: 'product2',
    data() {
      return {
        flag: true,
        type: '新品',
        xialaKuang: false,
        youhui: false,
        bao_zhang: false,
        fahuo: false,
        canshu: false,
        url: 'https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103111297//428_428_C7E21E95BA1D69E3CE93992DDF4F7A3Fmp.png',
        srcList: [
          'https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103111297//428_428_C7E21E95BA1D69E3CE93992DDF4F7A3Fmp.png'
        ]
      }
    },
    methods: {
      toDetails(type) {
        console.log(type)
        this.type = type
      },
      add() {
        var txt = document.getElementsByClassName("num")[0];
        var a = txt.value;
        a++;
        txt.value = a;
      },
      sub() {
        var txt = document.getElementsByClassName("num")[0];
        var a = txt.value;
        a--;
        if (a <= 0) {
          txt.value = 1
        } else {
          txt.value = a
        }
      },
      sp_color() {
        console.log('玄黑')
      },
      sp_size() {
        console.log('16GB+1TB')
      },
      addShopcart() {
        this.$store.commit('shopcart/addShopcart', {
          id: 1000,
          count: parseInt(1),
          url: 'https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103111297//428_428_C7E21E95BA1D69E3CE93992DDF4F7A3Fmp.png',
          price: 1149,
          detail: '华为畅享 70 128GB 曜金黑 鸿蒙手机',
          selected: true,
          path:'/Product2'
        })
      },
      pay() {
        this.$router.push({
          name: 'pay',
          params: {
            detail: {
              id: 1000,
              count: parseInt(1),
              url: 'https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103111297//428_428_C7E21E95BA1D69E3CE93992DDF4F7A3Fmp.png',
              price: 1149,
              detail: '华为畅享 70 128GB 曜金黑 鸿蒙手机',
              selected: true,
              path:'/Product2'
            }
          }
        })
        this.$store.state.onHomePage = false
      }

      // marginLeft(right) {

      // 	var time = 2000;
      // 	let content = document.querySelector('.banner-imgBox2');
      // 	let switchBtn = document.querySelector('.banner-imgBox-div');
      // 	switchBtn.children[0].classList.add('on2');
      // 	let index = 0;
      // 	let x = 0;

      // 	if (right) {
      // 		switchBtn.children[index].classList.remove('on2');
      // 		if (index == switchBtn.children.length - 1) {
      // 			index = 0;
      // 			content.innerHTML += content.innerHTML;
      // 			x++;
      // 		} else {
      // 			index++;
      // 			x++;
      // 		}
      // 		switchBtn.children[index].classList.add('on2');
      // 		content.style.marginLeft = x * -1530 + "px"
      // 	} else {
      // 		switchBtn.children[index].classList.remove('on2');
      // 		if (index == 0) {
      // 			index = switchBtn.children.length - 1;
      // 			if (x == 0) {
      // 				x = 0
      // 			} else {
      // 				x--;
      // 			}
      // 		} else {
      // 			index--;
      // 			x--;
      // 		}
      // 		switchBtn.children[index].classList.add('on2');
      // 		content.style.marginLeft = x * -1530 + "px"
      // 	}
      // 	var interval = setInterval(() => {
      // 		marginLeft(true)
      // 	}, time);


      // 	let container = document.querySelector('.banner-imgBox');
      // 	// 鼠标经过时清除定时器
      // 	container.onmouseover = function() {
      // 		clearInterval(interval);
      // 	}
      // 	// 鼠标移开时设置定时器
      // 	container.onmouseout = function() {
      // 		// 先清除定时器
      // 		clearInterval(interval);
      // 		// 往右滑动并开启定时器
      // 		// marginLeft(true)
      // 		interval = setInterval(() => {
      // 			marginLeft(true)
      // 		}, time);
      // },

    }
  }
</script>


<style>
  .header-pullapp {
    position: relative;
    height: 2.7rem;
    background-color: #fff;
  }

  .header-pullapp-content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 106;
    max-width: 720px;
    margin: 0 auto;
    background-color: #333;
    height: 2.7rem;
    clear: both;
  }

  .header-pullapp-content .header-pullapp-close {
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 2rem;
    left: 0;
  }

  .header-pullapp-content .header-pullapp-img {
    display: block;
    float: left;
    width: 2rem;
    height: 2rem;
    margin-left: 2.1rem;
    margin-top: .35rem;
  }

  .header-pullapp-content .header-pullapp-txtbox {

    display: flex;
    align-items: center;
    -webkit-box-align: center;
    flex-wrap: wrap;
    float: left;
    color: #fff;
    font-size: .65rem;
    margin-left: .5rem;
    height: 100%;
    width: auto;
  }

  .header-pullapp-content .header-pullapp-close .img {
    position: absolute;
    top: .9rem;
    display: block;
    width: .9rem;
    height: .9rem;
    left: .6rem;
    background: url(https://res.vmallres.com/nwap/cp_20230816/images/echannelWap/icon/icon-app-close.png) no-repeat;
    background-size: .85rem .85rem;
  }

  .header-pullapp-txtbox .header-pullapp-txtbox-title {
    font-size: .65rem;
    height: .93rem;
    line-height: .93rem;
  }

  .header-pullapp-txtbox .header-pullapp-txtbox-txt {
    font-size: .55rem;
    margin-top: .1rem;
    height: .786rem;
    line-height: .786rem;
    color: rgba(255, 255, 255, .6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }

  .header-pullapp-btnbox .header-pullapp-btn {
    font-size: .55rem;
    display: inline-block;
    margin-right: .6rem;
    height: 1.1rem;
    line-height: 1.1rem;
    color: #333;
    max-width: 2.9rem;
    overflow: hidden;
    background: #fff;
    padding: 0 .4rem;
    border-radius: .15rem;
  }

  .header-pullapp-txtbox span:first-child {
    width: 100%;

  }

  img {
    border: 0;
    max-width: 100%;
    height: auto;
    vertical-align: top;
  }

  .header-pullapp-content .header-pullapp-btnbox {
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    flex-wrap: wrap;
    height: 100%;
    float: right;
  }

  /* .tabbar{
	  height:3.8125rem;
	  width: 100%;
	  position: sticky;
	  top: 0;
	}
	.back{
		height:18px;
	}

	.el{
	  width: auto;
	}


	.fade-enter{
	  opacity: 0;
	  transform: translateX(100%);
	}
	.fade-leave-to{
	  opacity: 0;
	  transform: translateX(-100%);
	  position: absolute;
	}
	.fade-enter-active, .fade-leave-active {
	  transition: all .5s ease;
	}
	 */
  .top_nav {
    height: 2.8rem;
    width: 100%;
    position: sticky;
    top: 0;
    text-align: center;
    background-color: #f1f3f5 !important;
    flex: 6;
  }

  .top_click {
    color: rgb(207, 10, 44);
    border-bottom: 4px solid rgb(207, 10, 44);
  }

  .back {
    float: left;
    width: 30px;
    margin-top: 0.625rem;
    margin-left: 1.25rem;
  }

  .top_nav .xiala {
    float: left;
    width: 30px;
    margin-top: 0.56rem;
    margin-right: 0rem;
    margin-left: 1.25rem;
  }

  .top_nav a {
    float: left;
    width: 20%;
  }

  .top_nav p {
    margin-top: 0.625rem;
    width: 15%;
    float: left;
    font-size: 14px;
    color: rgb(115, 118, 120);
  }

  /* 下拉框 */
  .header-menu {
    width: 120px;
    position: absolute;
    top: 3.9rem;
    right: .5rem;
    border-radius: .25rem;
    background-color: #fff;
    box-shadow: 0rem 0rem 0.25rem 0rem rgba(0, 0, 0, .1);
    opacity: .9;
  }

  ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 20px;
  }

  ol,
  ul {
    list-style: none;
  }

  .header-menu ul li {
    border-bottom: 1px solid rgba(255, 255, 255, .3);
  }

  li {
    display: list-item;
    text-align: -webkit-match-parent;
  }

  .header-menu ul li a {
    height: 2rem;
    border-bottom: 1px solid rgba(213, 213, 213, .5);
    padding: 0 0 0 .7rem;
    align-items: center;
    -webkit-box-align: center;
  }

  .icon-menu-index-black {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
    background: url(https://res.vmallres.com/nwap/cp_20230816/images/echannelWap/icon/icon-home-black.png) no-repeat center;
    background-size: 1.2rem 1.2rem;
  }

  .header-menu ul li span {
    padding-left: .4rem;
    text-align: center;
    font-size: .7rem;
    line-height: normal;
    color: #333;
  }

  .icon-menu-search-black {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
    background: url(https://res.vmallres.com/nwap/cp_20230816/images/echannelWap/icon/icon_search_black.png) no-repeat center;
    background-size: 1.2rem 1.2rem;
  }

  .icon-menu-category-black {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
    background: url(https://res.vmallres.com/nwap/cp_20230816/images/echannelWap/icon/icon_menu_category_black.png) no-repeat center;
    background-size: 1.2rem 1.2rem;
  }

  .icon-menu-cart-black {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
    background: url(https://res.vmallres.com/nwap/cp_20230816/images/echannelWap/icon/icon_cart_black.png) no-repeat center;
    background-size: 1.2rem 1.2rem;
  }

  .icon-menu-person-black {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
    background: url(https://res.vmallres.com/nwap/cp_20230816/images/echannelWap/icon/icon_person_black.png) no-repeat center;
    background-size: 1.2rem 1.2rem;
  }

  /* 轮播图 */
  /* .banner-imgBox {
		width: 28.125rem;
		height: 24.375rem;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
	}

	.banner-imgBox2 {
		width: 23.125rem;
		height: 23.75rem;
		display: flex;
		margin: 0 auto;
		transition: all 0.5s;
	}

	.banner-imgBox2>img {
		width: 425px;
		height: 100%;
	}

	.on {
		width: 5px;
		height: 5px;
		border-radius: 100%;
		background-color: gainsboro;
		margin-left: 20px;
	}

	.banner-imgBox-div {
		width: 400px;
		position: absolute;
		bottom: 20px;
		left: 40%;
		display: flex;
	}

	.on2 {
		background-color: red;
	}

	.banner-imgBox-left {
		position: absolute;
		left: 20px;
		top: 48%;
		width: 48px;
		height: 48px;
	}

	.banner-imgBox-right {
		position: absolute;
		right: 20px;
		top: 48%;
		width: 48px;
		height: 48px;
		margin-right: 0;
	} */
  .xia {
    background-color: #f1f3f5;
    height: auto;
  }

  .sid {
    width: 450px;
    height: 350px;
  }

  .head3 {
    width: 400px;
    height: 330px;
    overflow: hidden;
    float: left;
  }

  .head3_lunbo {
    width: 1600px;
    height: 330px;
    animation: text 10s infinite backwards;
    margin-left: 0%;

    /*消除图片间隔*/

  }

  .head3_lunbo img {
    width: 400px;
    height: 330px;
    text-align: center;
    float: left;
    object-position: 0%;
  }

  @keyframes text {

    /*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
    0%,
    20% {
      margin-left: 0px;
    }

    25%,
    45% {
      margin-left: -400px;
    }

    50%,
    70% {
      margin-left: -800px;
    }

    75%,
    100% {
      margin-left: -1200px;
    }
  }

  .huodong {
    width: 450px;
    height: auto;
  }

  /* 商品价格详情 */
  .spname,
  .spfahuo,
  .canshu,
  .tuwenxian {
    margin: 8px 8px 8px 8px;
    width: 440px;
    height: auto;
  }

  .pingjia {
    margin-left: 3px;
    width: 440px;
    height: auto;
  }

  .youhui_2 {
    width: 450px;
    top: 250px;
    position: absolute;
    z-index: 1;
    background-color: #fff;
    box-shadow: 0rem 0rem 0.25rem 0rem rgba(0, 0, 0, .1);
    bottom: 0;
    background-color: #fff;
    border-radius: 1.2rem 1.2rem 0rem 0rem;
  }

  .youhui_2 nav {
    margin-top: 10px;
    margin-left: 15px;
    height: 500px;
    overflow: scroll;
  }

  .youhui_ok span {
    font-size: .8rem;
    font-family: HarmonyHeiTi-Medium;
    color: #fff;
    padding: 0 .8rem !important;
    border-top: 1px solid rgba(0, 0, 0, .05);
    box-sizing: border-box;
    margin-left: 210px;
  }

  .youhui_ok {
    height: 2rem;
    line-height: 2rem;
    font-size: .8rem;
    font-family: HarmonyHeiTi-Medium;
    border-radius: 1rem;
    background: #cf0a2c;
    top: 500px;

  }

  /* 商品挑选 */
  .spselect {
    background: url(../assets/images/product_select.jpg);
    background-size: 450px;

    width: 450px;
    height: 203px;
  }

  .spcolor,
  .spsize {
    width: 430px;
    height: 53px;
  }

  .baozhang {
    height: 47px;
    width: 430px;
    float: left;
  }

  .spnum {
    height: 50px;
    width: 430px;
    float: left;
  }

  .numa {
    left: 4.5rem;
  }

  .nums {
    left: 5.5rem;
  }

	.num {
		width: 35px;
		height: 35px;
		line-height: 100%;
		size: 45px;
		font-size: .65em;
		color: rgba(0, 0, 0, .9);
		text-align: center;
		box-sizing: border-box;
		left: 5rem;
		padding: 0;
	}
	.tuwen{
		width: 450px;
	}
	/* 加入购物车 */
	.buy{
		height: 60px;
		width: 450px;
		background-color: #f1f3f5;
		align-content: center;
		position: sticky;
		bottom: 130px;
		float: left;
	}
	.jiagou {
		height: 2rem;
		width: 200px;
		margin-left: 20px;
		margin-top: 15px;
		line-height: 2rem;
		font-size: .8rem;
		font-family: HarmonyHeiTi-Medium;
		border-radius: 1rem;
		background: #cf0a2c;
		text-align: center;
		float: left;
	}
	.timebuy{
		height: 2rem;
		width: 200px;
		margin-top: 15px;
		margin-left: 10px;
		line-height: 2rem;
		font-size: .8rem;
		font-family: HarmonyHeiTi-Medium;
		border-radius: 1rem;
		background: #cf0a2c;
		text-align: center;
		float: left;
	}
	.jiagou span,.timebuy span {
		font-size: .8rem;
		font-family: HarmonyHeiTi-Medium;
		color: #fff;
		padding: 0 .8rem !important;
		border-top: 1px solid rgba(0, 0, 0, .05);
		box-sizing: border-box;
	}
</style>
